<script setup>

import ZoomInBanner from "@/components/ZoomInBanner.vue";
import IntroSection from "@/components/IntroSection.vue";
import ScrollerBanner from "@/components/ScrollerBanner.vue";
import SegTitle from "@/components/SegTitle.vue";
import {onBeforeUnmount, onMounted, ref, watch} from "vue";
import {cases} from "@/views/case-details/mockCase.ts";
import CasePopup from "@/views/case-details/CasePopup.vue";
import {allCases} from "@/assets/js/all-case.ts";

const state = ref({
  showAdvantage: true,
  curCase: {},
  showCasePopup: false,
})
const data = {
  number: '03',
  title: '新媒体运营及活动策划',
  eng: 'New Media Operations and Event Planning',
  desc: '精准创意内容创作与互动，助力品牌全方位传播',
  detail: '通过内容创作、社交媒体管理和数据分析，提升品牌在线影响力；同时提供从需求分析到现场执行的全流程活动策划，确保活动的成功和高效执行。我们旨在帮助品牌在数字和实体领域实现全面的互动与传播，增强客户参与度和品牌认知度。',
  titles: ['新媒体代运营', '线下活动拍摄', '企业活动策划', '企业家IP孵化']
}
const list = [
  {
    title: '精准投放',
    eng: 'Precise Launch',
    desc: '实现资源的最大化利用，提升营销活动的整体效能。',
    icon: '08'
  },
  {
    title: '实时互动',
    eng: 'Real-time interaction',
    desc: '快速响应用户需求和反馈，增强用户粘性和品牌忠诚度。',
    icon: '09'
  },
  {
    title: '创意独特',
    eng: 'Creative ideas',
    desc: '展示品牌的创意和个性化特征，帮助在市场中建立差异化优势。',
    icon: '10'
  },
  {
    title: '数据驱动优化',
    eng: 'Data-driven optimization',
    desc: '更好地了解市场趋势和用户偏好，优化运营策略。',
    icon: '11'
  },
]
const randomCase = () => {
  let caseIds = allCases.filter(item => item.category === '新媒体运营及活动策划').map(item => item.caseId)
  if (caseIds.length % 2 !== 0) {
    caseIds.push(caseIds[0])
  }
  // 随机打乱顺序
  caseIds.sort(() => 0.5 - Math.random())
  return caseIds;
}
onMounted(() => {
  window.addEventListener('popstate', handlePopState);
  watch(() => state.value.showCasePopup, (newVal) => {
    document.body.style.overflow = newVal ? 'hidden' : '';
  })
})
onBeforeUnmount(() => {
  window.removeEventListener('popstate', handlePopState);
});
const handlePopState = (event) => {
  if (state.value.showCasePopup) {
    state.value.showCasePopup = false;
    document.body.style.overflow = '';
  }
};
const showCasePopup = (caseId) => {
  state.value.curCase = cases.find(it => it.caseId === caseId);
  state.value.showCasePopup = true;
}
</script>

<template>
  <view class="seg1 container"/>
  <IntroSection class="introSection" :data="data"/>
  <SegTitle title="我们的优势" label="OUR ADVANTAGES" :enter="state.showAdvantage"/>
  <ZoomInBanner :index="2" :list="list"/>
  <SegTitle title="案例展示" label="CASE PRESENTATION" :enter="state.showAdvantage"/>
  <ScrollerBanner :randomIds="randomCase()" @onItemClick="showCasePopup"/>
  <CasePopup :show="state.showCasePopup"
             :article="state.curCase"
             @onClose="state.showCasePopup = false"/>
</template>

<style scoped>
.seg1.container {
  height: calc(100vw * 1024 / 1920);
  overflow-y: unset;
  background-image: url("https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_index_service3_bg.png");
}

.introSection {
  z-index: 1;
  margin-top: -27%;
}
</style>